// 示例组件代码
export const titleCode = `<template>
  <div class="dk-title">
    <div class="title">{{ title }}</div>
    <div class="sub-title">{{ sub_title }}</div>
  </div>
</template>

<script>
export default {
  name: 'DkTitle',
  props: {
    title: {
      type: String,
      default: '主标题'
    },
    sub_title: {
      type: String,
      default: '副标题'
    }
  }
}
</script>

<style scoped>
.dk-title {
  text-align: center;
  padding: 20px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.sub-title {
  font-size: 16px;
  color: #666;
}
</style>`

export const buttonCode = `<template>
  <button 
    :class="['custom-btn', type]"
    @click="handleClick"
  >
    {{ text }}
  </button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    text: {
      type: String,
      default: '点击我'
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    handleClick() {
      alert('按钮被点击了！')
    }
  }
}
</script>

<style scoped>
.custom-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}
.primary {
  background-color: #409eff;
  color: white;
}
.primary:hover {
  background-color: #66b1ff;
}
</style>`

export const cardCode = `<template>
  <div class="card max-w-sm">
    <div class="card-header">
      <h3 class="text-lg font-semibold text-gray-800">{{ title }}</h3>
    </div>
    <div class="mb-4">
      <p class="text-gray-600 leading-relaxed">{{ content }}</p>
    </div>
    <div class="text-sm text-gray-400">
      <small>{{ date }}</small>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoCard',
  props: {
    title: {
      type: String,
      default: '卡片标题'
    },
    content: {
      type: String,
      default: '这是卡片的内容区域，可以显示各种信息。'
    },
    date: {
      type: String,
      default: '2024-01-01'
    }
  }
}
</script>`

export const unocssButtonCode = `<template>
  <div class="flex-center gap-4 p-6">
    <button class="btn-primary" @click="handleClick('primary')">
      主要按钮
    </button>
    <button class="btn-success" @click="handleClick('success')">
      成功按钮
    </button>
    <button class="btn-danger" @click="handleClick('danger')">
      危险按钮
    </button>
    <button class="px-4 py-2 bg-gradient-primary text-white rounded-lg hover:shadow-lg transition-all duration-300" 
            @click="handleClick('gradient')">
      渐变按钮
    </button>
  </div>
</template>

<script>
export default {
  name: 'UnocssButtons',
  methods: {
    handleClick(type) {
      alert(\`点击了\${type}按钮！\`)
    }
  }
}
</script>`

export const unocssCardCode = `<template>
  <div class="flex-center min-h-40">
    <div class="card max-w-md">
      <div class="flex-between card-header">
        <h2 class="text-xl font-bold text-gray-800">{{ title }}</h2>
        <div class="w-3 h-3 rounded-full" :class="statusColor"></div>
      </div>
      <div class="space-y-3">
        <p class="text-gray-600">{{ description }}</p>
        <div class="flex gap-2">
          <span v-for="tag in tags" :key="tag" 
                class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
            {{ tag }}
          </span>
        </div>
      </div>
      <div class="flex-between mt-4 pt-4 border-t border-gray-200">
        <span class="text-sm text-gray-500">{{ date }}</span>
        <button class="btn-primary text-sm">查看详情</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UnocssCard',
  props: {
    title: {
      type: String,
      default: 'UnoCSS 卡片组件'
    },
    description: {
      type: String,
      default: '这是一个使用 UnoCSS 原子化类构建的现代卡片组件，展示了如何用简洁的类名实现复杂的样式效果。'
    },
    status: {
      type: String,
      default: 'active',
      validator: (value) => ['active', 'inactive', 'pending'].includes(value)
    },
    tags: {
      type: Array,
      default: () => ['Vue3', 'UnoCSS', '原子化CSS']
    },
    date: {
      type: String,
      default: '2024-01-01'
    }
  },
  computed: {
    statusColor() {
      const colors = {
        active: 'bg-green-500',
        inactive: 'bg-gray-400',
        pending: 'bg-yellow-500'
      }
      return colors[this.status] || colors.active
    }
  }
}
</script>`

export const unocssFormCode = `<template>
  <div class="flex-center min-h-96">
    <form @submit.prevent="handleSubmit" class="card max-w-md w-full">
      <h2 class="text-2xl font-bold text-center mb-6 text-gray-800">用户注册</h2>
      
      <div class="form-item">
        <label class="form-label">用户名</label>
        <input v-model="form.username" type="text" class="form-input" placeholder="请输入用户名">
      </div>
      
      <div class="form-item">
        <label class="form-label">邮箱</label>
        <input v-model="form.email" type="email" class="form-input" placeholder="请输入邮箱">
      </div>
      
      <div class="form-item">
        <label class="form-label">密码</label>
        <input v-model="form.password" type="password" class="form-input" placeholder="请输入密码">
      </div>
      
      <div class="form-item">
        <label class="flex items-center">
          <input v-model="form.agree" type="checkbox" class="mr-2">
          <span class="text-sm text-gray-600">我同意用户协议和隐私政策</span>
        </label>
      </div>
      
      <button type="submit" 
              :disabled="!isFormValid"
              class="w-full py-3 px-4 rounded-lg font-medium transition-all duration-200"
              :class="isFormValid ? 'bg-blue-600 text-white hover:bg-blue-700 hover:shadow-lg' : 'bg-gray-300 text-gray-500 cursor-not-allowed'">
        {{ isFormValid ? '注册账号' : '请完善信息' }}
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'UnocssForm',
  data() {
    return {
      form: {
        username: '',
        email: '',
        password: '',
        agree: false
      }
    }
  },
  computed: {
    isFormValid() {
      return this.form.username && this.form.email && this.form.password && this.form.agree
    }
  },
  methods: {
    handleSubmit() {
      if (this.isFormValid) {
        alert(\`注册成功！用户名: \${this.form.username}\`)
      }
    }
  }
}
</script>`
